<script setup lang="ts">
import { reactive, ref } from 'vue';
import { useMainStore } from '../store';
import { storeToRefs } from 'pinia';
import type { ElForm } from 'element-plus';
import { userLogin, querymenus } from '../request/api';
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';

//实例化路由对象
const router = useRouter();

const mainStore = useMainStore();

const { menus } = storeToRefs(mainStore);

const username = ref('');
const password = ref('');

type FormInstance = InstanceType<typeof ElForm>;
const ruleFormRef = ref<FormInstance>();
//表单绑定的值
const ruleForm = reactive({
	username: '',
	password: '',
});

//登陆按钮
const loginbtn = (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	formEl.validate(async (valid) => {
		if (valid) {
			const { data: res } = await userLogin(ruleForm.username, ruleForm.password);

			if (res.code == 200) {
				ElMessage.success('登陆成功');
				//登陆成功跳转到主页并把token保存在sessionstorage
				window.sessionStorage.setItem('token', res.data.token);

				router.push('/home');
			} else if (res.code == 403) {
				ElMessage.error('用户名或密码错误');
			} else {
				ElMessage.error(res.msg);
			}

			console.log('验证通过!');
			console.log(ruleForm.username);
		} else {
			console.log('验证失败!');
			return false;
		}
	});
};
//重置按钮
const resebtn = (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	formEl.resetFields();
};

// 表单规则
const rules = reactive({
	username: [
		{
			required: true,
			message: '用户名不能为空',
			trigger: 'blur',
		},
		{
			min: 3,
			max: 11,
			message: '请输入3到10个字符',
			trigger: 'blur',
		},
	],
	password: [
		{
			required: true,
			message: '密码不能为空',
			trigger: 'blur',
		},
		{
			min: 3,
			max: 11,
			message: '请输入3到10个字符',
			trigger: 'blur',
		},
	],
});
</script>

<template>
	<div class="login_container">
		<img class="mingpian" src="../assets/zengliyi.png" />

		<div class="img">
			<img src="../assets/img-3.svg" />
		</div>
		<div class="login_box">
			<!--      头像区域-->
			<div class="avatar_box">
				<img src="../assets/logo.png" />
				<h2>欢迎登录</h2>
			</div>
			<!--      表单提交区域-->
			<el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="0px" class="login_form">
				<!--        用户名-->
				<el-form-item prop="username">
					<el-input v-model="ruleForm.username" placeholder="请输入用户名">
						<template #prefix>
							<el-icon style="margin-top: 8px; margin-left: -5px" :size="15">
								<avatar />
							</el-icon>
						</template>
					</el-input>
				</el-form-item>
				<!--        密码-->
				<el-form-item prop="password">
					<el-input v-model="ruleForm.password" type="password" placeholder="请输入密码">
						<template #prefix>
							<el-icon style="margin-top: 8px; margin-left: -5px" :size="15">
								<goods-filled />
							</el-icon>
						</template>
					</el-input>
				</el-form-item>
				<!--        按钮区-->
				<el-row :gutter="33" justify="end">
					<el-col :span="9">
						<el-form-item class="btns">
							<el-button color="#06B799" type="primary" @click="loginbtn(ruleFormRef)">登录</el-button>
							<el-button type="info" @click="resebtn(ruleFormRef)">重置</el-button>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
		</div>
	</div>
</template>

<style lang="less" scoped>
.login_container {
	height: 100%;
	// background-color: #5dbe8a;
	background-image: url('../assets/bg.png');
}
.login_box {
	position: absolute;
	top: 52%;
	left: 72%;
	transform: translate(-50%, -50%);
	width: 450px;
	height: 300px;
	background-color: white;
	border-radius: 3px;
	box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
	.avatar_box {
		position: absolute;
		left: 50%;
		transform: translate(-50%, -50%);
		padding: 10px;
		width: 130px;
		height: 130px;
		border: 1px solid #eee;
		border-radius: 50%;
		box-shadow: 0 0 10px #ddd;
		background-color: #fff;
		img {
			width: 100%;
			height: 100%;
			border-radius: 50%;
			background-color: #eeeeee;
		}
	}
	.login_form {
		box-sizing: border-box;
		position: absolute;
		bottom: 0;
		width: 100%;
		padding: 0 20px;
	}
}
.img {
	// display: flex;
	// justify-content: flex-end;
	// align-items: center;
	position: absolute;
	top: 35%;
	left: 10%;
}

.img img {
	width: 500px;
}

h2 {
	font-size: 1.6rem;
	text-transform: uppercase;
	margin: 18px 13px;
	color: #999;
}

.mingpian {
	width: 34vw;
	padding-left: 24%;
	padding-top: 0%;
}
</style>
